<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>网页</title>
<style type="text/css">
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('./背景图片.jpg'); 
    background-size: cover; 
    background-position: center; 
    opacity: 0.6; 
    z-index: -1; 
}
.dg1{
    width:1200px;
    height:100px;
    border-style: double;
    float: center;
    background-color:rgb(247, 152, 152);
    span{
         display:inline-block; width:80px; height:45px;
        
        }
        margin:50px auto;
        background-color:#192132; padding-left:20px;
        border-bottom:3px solid #000;
}
.dg2{ 
    width:600px;
    height:50px;
    border-style: double;
    float:left;
    background-image: repeating-linear-gradient(90deg,#E50743,#E8ED30 10%,#3FA62E 15%);
}
.dg3{
    width:600px;
    height:50px;
    border-style: double;
    float:right ;
    background-color:rgb(113, 189, 189);
    border-top-style: dotted;
    border-bottom-style: dotted;
    border-left-style: double;
    border-right-style: double; 
    box-shadow: 10px 10px 5px rgba(231, 221, 106, 0.5);
}
    
.d1{
    width:400px;
        height:60px;
        margin:30px;
        background-color:rgb(133, 0, 7);
        border-style: double;
}
.d2{
    width:400px;
        height:60px;
        margin:30px;
        background-color:rgb(133, 0, 7);
        border-style: double;

}
.d3{
    width:400px;
        height:60px;
        margin:30px;
        background-color:rgb(133, 0, 7);
        border-style: double;
}
.s1{
    width:400px;
        height:60px;
        margin:30px;
        background-color:rgb(133, 0, 7);
        border-style: double;
        
}
.s2{
    width:400px;
        height:60px;
        margin:30px;
        background-color:rgb(133, 0, 7);
        border-style: double;
}
.s3{
    width:400px;
        height:60px;
        margin:30px;
        background-color:rgb(133, 0, 7);
        border-style: double;
}
.s4{
        width:400px;
        height:60px;
        margin:30px;
        background-color:rgb(133, 0, 7);
        border-style: double;
}
        .one{background:url(images/1.png) no-repeat;}
        .two{background:url(images/2.png) no-repeat;}
        .three{background:url(images/3.png) no-repeat;}
        .four{background:url(images/4.png) no-repeat;}
        .five{background:url(images/5.png) no-repeat;}
        .six{background:url(images/6.png) no-repeat;}  

</style>
</head>
<body>

    <div class="dg1"><font color="white">dg1<a href="https://www.baidu.com/">青春扬帆起航</a></font>

        <image src="./图片/1.jpg.png"></image>
        <image src="./图片/2.png"></image>
        <image src="./图片/3.png"></image>
        <image src="./图片/4.png"></image>
        <image src="./图片/5.png"></image>
        <image src="./图片/6.png"></image>
    
    <span class="one"></span>
    <span class="two"></span>
    <span class="three"></span>
    <span class="four"></span>
    <span class="five"></span>
    <span class="six"></span>

</div>
   
    <div class="dg2"><font color="white">dg2<a href="https://www.baidu.com/">青春正当时</a></font></div>
    <span class="s1"><font color="white">s1青春扬帆起航</font></span>
    <div class="dg3"><font color="white">dg3<a href="https://www.baidu.com/">青春努力</a></font></div>

    <div class="d1"><font color="white">d1青春奋斗 这是<a href="https://www.baidu.com/">百度</a>的超链接</font></div>
    <span class="s2"><font color="white">s2青春扬帆起航</font></span>
    <div class="d2"><font color="white">d2青春无畏 这是<a href="https://www.taobao.com/">淘宝</a>的超链接</font></div>
    <span class="s3"><font color="white">s3青春扬帆起航</font></span>
    <div class="d3"><font color="white">d3青春无悔 这是<a href="https://www.alipay.com/">支付宝</a>>的超链接</font></div>
    <span class="s4"><font color="white">s4青春扬帆起航</font></span>

</body>
</html>







   